<template>
  <div style="text-align:left">
    <el-dialog :visible.sync="dialogVisible">
      <system-menu :formData="menuData" @success="handleDialogSuccess"></system-menu>
    </el-dialog>
    <el-dialog :visible.sync="permissionDialogVisible">
      <system-menu-permission :menu="menuData" :transfer="permission" @success="handlePermissionDialogSuccess"></system-menu-permission>
    </el-dialog>
    <el-tree default-expand-all :data="tree" accordion :render-content="renderContent"> </el-tree>
  </div>
</template>

<script>

import MenuItem from './MenuItem'
import Menu from './Menu'
import MenuPermission from './MenuPermission'
export default {
  name: 'permissionIndex',
  components: { 'system-menu': Menu, 'system-menu-permission': MenuPermission },
  data: function() {
    return {
      tree: [],
      menuData: undefined,
      permission: undefined,
      dialogVisible: false,
      permissionDialogVisible: false
    }
  },
  methods: {
    loadTree: function() {
//      http.get(url.menu).then(data => {
//        this.tree = []
//        this.tree.push(data)
//      })
      this.$api.getMenuList().then(res =>{
        if(res.code == '000000'){
          this.tree = [];
          this.tree.push(res.data);
          this.$message.success("获取菜单成功")
        }
      })
    },
    renderContent(h, { node, data, store }) {
      return h(MenuItem, {
        props: { menu: node.data.value },
        on: { add: this.handleAdd, edit: this.handleEdit, reload: this.loadTree, 'permission-manage': this.handlePermissionManage }
      })
    },
    handleDialogSuccess: function() {
      this.dialogVisible = false
      this.loadTree()
    },
    handlePermissionDialogSuccess: function() {
      this.permissionDialogVisible = false
    },
    handleDeleteSuccess: function() {
      console.log('123')
      this.loadTree()
    },
    handleAdd: function(data) {
      this.menuData = data
      this.dialogVisible = true
    },
    handleEdit: function(data) {
      this.menuData = data
      this.dialogVisible = true
    },
    handlePermissionManage(menu) {
// let config = { pathVar: 'permission/' + menu.id }
//      http.get(http.menu, config).then(data => {
//        this.permission = data]
//        this.menuData = menu
//        this.permissionDialogVisible = true
//      })
      this.$api.getMenuPermissionList(menu.id).then(res =>{
        if(res.code == '000000'){
          this.permission = res.data
          this.menuData = menu
          this.permissionDialogVisible = true
        }
      })
    }
  },
  created: function() {
    this.loadTree()
  }
}
</script>

<style>
  .el-tree-node__content{
    line-height: 36px;
    height: 36px;
    cursor: pointer;
  }
  .el-tree-node__content > span:nth-child(2){
    width:100%;
    /*line-height:40px;*/
  }
</style>
